<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Events | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.19 and GitBook 2.6.7" />

  <meta property="og:title" content="Events | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="yihui/bookdown-crc" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Events | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-07-05" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="progress-bar.html"/>
<link rel="next" href="math-evaluator.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">R and JavaScript</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#disclaimer"><i class="fa fa-check"></i>Disclaimer</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="introduction.html"><a href="introduction.html"><i class="fa fa-check"></i><b>1</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#rationale"><i class="fa fa-check"></i>Rationale</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#prerequisites"><i class="fa fa-check"></i>Prerequisites</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#package-development"><i class="fa fa-check"></i>Package Development</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#json"><i class="fa fa-check"></i>JSON</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#javascript"><i class="fa fa-check"></i>JavaScript</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#methods"><i class="fa fa-check"></i>Methods</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#v8"><i class="fa fa-check"></i>V8</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#htmlwidgets"><i class="fa fa-check"></i>htmlwidgets</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#shiny"><i class="fa fa-check"></i>Shiny</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#reactr"><i class="fa fa-check"></i>reactR</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#bubble"><i class="fa fa-check"></i>bubble</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#r2d3"><i class="fa fa-check"></i>r2d3</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II JavaScript for Computations</b></span></li>
<li class="chapter" data-level="2" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>2</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i>Installation</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#basics"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i>External Libraries</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i>With Npm</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i>Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="node.html"><a href="node.html"><i class="fa fa-check"></i><b>3</b> Node.js with Bubble</a>
<ul>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#basics-1"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#r-markdown-engine"><i class="fa fa-check"></i>R Markdown Engine</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#npm"><i class="fa fa-check"></i>Npm</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="4" data-path="introduction-1.html"><a href="introduction-1.html"><i class="fa fa-check"></i><b>4</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#static-files"><i class="fa fa-check"></i>Static Files</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#example---alerts"><i class="fa fa-check"></i>Example - Alerts</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#from-r-to-javascript"><i class="fa fa-check"></i>From R to JavaScript</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#from-javascript-to-r"><i class="fa fa-check"></i>From JavaScript to R</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#deserialise"><i class="fa fa-check"></i>Deserialise</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="a-complete-integration.html"><a href="a-complete-integration.html"><i class="fa fa-check"></i><b>5</b> A Complete Integration</a>
<ul>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#serialisation"><i class="fa fa-check"></i>Serialisation</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#events-callbacks"><i class="fa fa-check"></i>Events &amp; Callbacks</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#as-a-package"><i class="fa fa-check"></i>As a Package</a>
<ul>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#dependencies"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#r-code"><i class="fa fa-check"></i>R Code</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#javascript-code"><i class="fa fa-check"></i>JavaScript Code</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#input-handler"><i class="fa fa-check"></i>Input Handler</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#wrapping-up"><i class="fa fa-check"></i>Wrapping up</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="a-complete-integration.html"><a href="a-complete-integration.html#exercises"><i class="fa fa-check"></i>Exercises</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="tips-tricks.html"><a href="tips-tricks.html"><i class="fa fa-check"></i><b>6</b> Tips &amp; Tricks</a>
<ul>
<li class="chapter" data-level="" data-path="tips-tricks.html"><a href="tips-tricks.html#events"><i class="fa fa-check"></i>Events</a></li>
<li class="chapter" data-level="" data-path="tips-tricks.html"><a href="tips-tricks.html#table-buttons"><i class="fa fa-check"></i>Table Buttons</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="custom-outputs.html"><a href="custom-outputs.html"><i class="fa fa-check"></i><b>7</b> Custom Outputs</a>
<ul>
<li class="chapter" data-level="" data-path="custom-outputs.html"><a href="custom-outputs.html#inner-workings"><i class="fa fa-check"></i>Inner-workings</a></li>
<li class="chapter" data-level="" data-path="custom-outputs.html"><a href="custom-outputs.html#discover-lena.js"><i class="fa fa-check"></i>Discover Lena.js</a></li>
<li class="chapter" data-level="" data-path="custom-outputs.html"><a href="custom-outputs.html#setup"><i class="fa fa-check"></i>Setup</a></li>
<li class="chapter" data-level="" data-path="custom-outputs.html"><a href="custom-outputs.html#output"><i class="fa fa-check"></i>Output</a></li>
<li class="chapter" data-level="" data-path="custom-outputs.html"><a href="custom-outputs.html#render"><i class="fa fa-check"></i>Render</a></li>
<li class="chapter" data-level="" data-path="custom-outputs.html"><a href="custom-outputs.html#javascript-binding"><i class="fa fa-check"></i>JavaScript Binding</a></li>
<li class="chapter" data-level="" data-path="custom-outputs.html"><a href="custom-outputs.html#test"><i class="fa fa-check"></i>Test</a></li>
</ul></li>
<li class="part"><span><b>IV Data Visualisation</b></span></li>
<li class="chapter" data-level="8" data-path="introduction-2.html"><a href="introduction-2.html"><i class="fa fa-check"></i><b>8</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#candidate-libraries"><i class="fa fa-check"></i>Candidate Libraries</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#plotly"><i class="fa fa-check"></i>Plotly</a></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#highchart.js"><i class="fa fa-check"></i>Highchart.js</a></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#chart.js"><i class="fa fa-check"></i>Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#how-it-works"><i class="fa fa-check"></i>How it works</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="your-first-widget.html"><a href="your-first-widget.html"><i class="fa fa-check"></i><b>9</b> Your First Widget</a>
<ul>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#the-scaffold"><i class="fa fa-check"></i>The Scaffold</a></li>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#the-output"><i class="fa fa-check"></i>The Output</a></li>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#javascript-side"><i class="fa fa-check"></i>JavaScript-side</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html"><i class="fa fa-check"></i><b>10</b> A Realistic Widget</a>
<ul>
<li class="chapter" data-level="" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#dependency"><i class="fa fa-check"></i>Dependency</a></li>
<li class="chapter" data-level="" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#javascript-1"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#html-element"><i class="fa fa-check"></i>HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="the-full-monty.html"><a href="the-full-monty.html"><i class="fa fa-check"></i><b>11</b> The Full Monty</a>
<ul>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#dependencies-1"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#javascript-2"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#working-with-data"><i class="fa fa-check"></i>Working with Data</a></li>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#transforming-data"><i class="fa fa-check"></i>Transforming Data</a>
<ul>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#in-javascript"><i class="fa fa-check"></i>In JavaScript</a></li>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#in-r"><i class="fa fa-check"></i>In R</a></li>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#pros-cons"><i class="fa fa-check"></i>Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="the-full-monty.html"><a href="the-full-monty.html#on-print"><i class="fa fa-check"></i>On Print</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="advanced-topics.html"><a href="advanced-topics.html"><i class="fa fa-check"></i><b>12</b> Advanced Topics</a>
<ul>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#shared-variables"><i class="fa fa-check"></i>Shared Variables</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing"><i class="fa fa-check"></i>Sizing</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing-policy"><i class="fa fa-check"></i>Sizing Policy</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#resizing"><i class="fa fa-check"></i>Resizing</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#pre-render-hooks-security"><i class="fa fa-check"></i>Pre Render Hooks &amp; Security</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code-1"><i class="fa fa-check"></i>JavaScript Code</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#prepend-append-content"><i class="fa fa-check"></i>Prepend &amp; Append Content</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#dependencies-2"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="advanced-topics.html"><a href="advanced-topics.html#compatibility"><i class="fa fa-check"></i>Compatibility</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="working-with-shiny.html"><a href="working-with-shiny.html"><i class="fa fa-check"></i><b>13</b> Working with Shiny</a>
<ul>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#javascript-to-r"><i class="fa fa-check"></i>JavaScript to R</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#input-handler-1"><i class="fa fa-check"></i>Input Handler</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#r-to-javascript"><i class="fa fa-check"></i>R to JavaScript</a>
<ul>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#send-data"><i class="fa fa-check"></i>Send Data</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#retrieve-widget-instance"><i class="fa fa-check"></i>Retrieve Widget Instance</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#handle-data"><i class="fa fa-check"></i>Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#proxy-function"><i class="fa fa-check"></i>Proxy Function</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#example"><i class="fa fa-check"></i>Example</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#update"><i class="fa fa-check"></i>Update</a></li>
</ul></li>
<li class="part"><span><b>V Examples</b></span></li>
<li class="chapter" data-level="14" data-path="ploty.html"><a href="ploty.html"><i class="fa fa-check"></i><b>14</b> Ploty</a>
<ul>
<li class="chapter" data-level="" data-path="ploty.html"><a href="ploty.html#discover"><i class="fa fa-check"></i>Discover</a></li>
<li class="chapter" data-level="" data-path="ploty.html"><a href="ploty.html#basics-2"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="ploty.html"><a href="ploty.html#javascript-to-r-1"><i class="fa fa-check"></i>JavaScript to R</a></li>
<li class="chapter" data-level="" data-path="ploty.html"><a href="ploty.html#r-to-javascript-1"><i class="fa fa-check"></i>R to JavaScript</a></li>
<li class="chapter" data-level="" data-path="ploty.html"><a href="ploty.html#performance-security"><i class="fa fa-check"></i>Performance &amp; Security</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="image-classifier.html"><a href="image-classifier.html"><i class="fa fa-check"></i><b>15</b> Image Classifier</a></li>
<li class="chapter" data-level="16" data-path="progress-bar.html"><a href="progress-bar.html"><i class="fa fa-check"></i><b>16</b> Progress Bar</a>
<ul>
<li class="chapter" data-level="" data-path="progress-bar.html"><a href="progress-bar.html#r-code-1"><i class="fa fa-check"></i>R code</a></li>
<li class="chapter" data-level="" data-path="progress-bar.html"><a href="progress-bar.html#javascript-code-2"><i class="fa fa-check"></i>JavaScript code</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="events-1.html"><a href="events-1.html"><i class="fa fa-check"></i>Events</a></li>
<li class="chapter" data-level="17" data-path="math-evaluator.html"><a href="math-evaluator.html"><i class="fa fa-check"></i><b>17</b> Math Evaluator</a></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="events-1" class="section level1 unnumbered" number="">
<h1>Events</h1>
<p>The way rsup is set up is interesting in that the loading bar is shown or hidden from the R server. One could set it up differently however. Perhaps, instead of having to trigger the loading bar from the server it could all be handled automatically: showing the bar when the server is computing or redrawing things and hiding it when the server becomes idle again.</p>
<div class="sourceCode" id="cb369"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb369-1"><a href="events-1.html#cb369-1"></a><span class="kw">library</span>(shiny)</span>
<span id="cb369-2"><a href="events-1.html#cb369-2"></a></span>
<span id="cb369-3"><a href="events-1.html#cb369-3"></a>shiny<span class="op">::</span><span class="kw">addResourcePath</span>(<span class="st">&quot;www&quot;</span>, <span class="st">&quot;www&quot;</span>)</span>
<span id="cb369-4"><a href="events-1.html#cb369-4"></a></span>
<span id="cb369-5"><a href="events-1.html#cb369-5"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb369-6"><a href="events-1.html#cb369-6"></a>  tags<span class="op">$</span><span class="kw">head</span>(</span>
<span id="cb369-7"><a href="events-1.html#cb369-7"></a>    tags<span class="op">$</span><span class="kw">script</span>(<span class="dt">src =</span> <span class="st">&quot;https://unpkg.com/rsup-progress&quot;</span>),</span>
<span id="cb369-8"><a href="events-1.html#cb369-8"></a>    tags<span class="op">$</span><span class="kw">script</span>(<span class="dt">src =</span> <span class="st">&quot;www/auto.js&quot;</span>)</span>
<span id="cb369-9"><a href="events-1.html#cb369-9"></a>  ),</span>
<span id="cb369-10"><a href="events-1.html#cb369-10"></a>  <span class="kw">br</span>(),</span>
<span id="cb369-11"><a href="events-1.html#cb369-11"></a>  <span class="kw">actionButton</span>(<span class="st">&quot;render&quot;</span>, <span class="st">&quot;render&quot;</span>),</span>
<span id="cb369-12"><a href="events-1.html#cb369-12"></a>  <span class="kw">plotOutput</span>(<span class="st">&quot;plot&quot;</span>)</span>
<span id="cb369-13"><a href="events-1.html#cb369-13"></a>)</span>
<span id="cb369-14"><a href="events-1.html#cb369-14"></a></span>
<span id="cb369-15"><a href="events-1.html#cb369-15"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output){</span>
<span id="cb369-16"><a href="events-1.html#cb369-16"></a></span>
<span id="cb369-17"><a href="events-1.html#cb369-17"></a>  output<span class="op">$</span>plot &lt;-<span class="st"> </span><span class="kw">renderPlot</span>({</span>
<span id="cb369-18"><a href="events-1.html#cb369-18"></a>    input<span class="op">$</span>render</span>
<span id="cb369-19"><a href="events-1.html#cb369-19"></a>    <span class="kw">Sys.sleep</span>(<span class="dv">2</span>)</span>
<span id="cb369-20"><a href="events-1.html#cb369-20"></a>    <span class="kw">hist</span>(<span class="kw">rnorm</span>(<span class="dv">100</span>))</span>
<span id="cb369-21"><a href="events-1.html#cb369-21"></a>  })</span>
<span id="cb369-22"><a href="events-1.html#cb369-22"></a></span>
<span id="cb369-23"><a href="events-1.html#cb369-23"></a>}</span>
<span id="cb369-24"><a href="events-1.html#cb369-24"></a></span>
<span id="cb369-25"><a href="events-1.html#cb369-25"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<p>Below we declare the progress variable that will hold the Rsup-progress object. This is declared before it is created as this object needs to be accessible in various contexts.</p>
<div class="sourceCode" id="cb370"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb370-1"><a href="events-1.html#cb370-1"></a><span class="co">// auto.js</span></span>
<span id="cb370-2"><a href="events-1.html#cb370-2"></a><span class="kw">var</span> progress<span class="op">;</span></span></code></pre></div>
<p>We can then observe for the <code>shiny:busy</code> and <code>shiny:idle</code> events to show and hide the progress bar automatically.</p>
<div class="sourceCode" id="cb371"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb371-1"><a href="events-1.html#cb371-1"></a><span class="co">// auto.js</span></span>
<span id="cb371-2"><a href="events-1.html#cb371-2"></a><span class="kw">var</span> progress<span class="op">;</span></span>
<span id="cb371-3"><a href="events-1.html#cb371-3"></a></span>
<span id="cb371-4"><a href="events-1.html#cb371-4"></a><span class="at">$</span>(document).<span class="at">on</span>(<span class="st">&#39;shiny:busy&#39;</span><span class="op">,</span> <span class="kw">function</span>(event)<span class="op">{</span></span>
<span id="cb371-5"><a href="events-1.html#cb371-5"></a>  progress <span class="op">=</span> <span class="kw">new</span> <span class="at">RsupProgress</span>()<span class="op">;</span></span>
<span id="cb371-6"><a href="events-1.html#cb371-6"></a>  <span class="va">progress</span>.<span class="at">start</span>()<span class="op">;</span></span>
<span id="cb371-7"><a href="events-1.html#cb371-7"></a><span class="op">}</span>)<span class="op">;</span></span>
<span id="cb371-8"><a href="events-1.html#cb371-8"></a></span>
<span id="cb371-9"><a href="events-1.html#cb371-9"></a><span class="at">$</span>(document).<span class="at">on</span>(<span class="st">&#39;shiny:idle&#39;</span><span class="op">,</span> <span class="kw">function</span>(event)<span class="op">{</span></span>
<span id="cb371-10"><a href="events-1.html#cb371-10"></a>  <span class="va">progress</span>.<span class="at">end</span>()<span class="op">;</span></span>
<span id="cb371-11"><a href="events-1.html#cb371-11"></a><span class="op">}</span>)<span class="op">;</span></span></code></pre></div>

</div>
            </section>

          </div>
        </div>
      </div>
<a href="progress-bar.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="math-evaluator.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/r-and-javascript/edit/master/32-rsup.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
